<template>
  <div class="coupon_verification">
    <div class="center" >
      <div class="qr" >
        <!-- 二维码 -->
        <div class="div1" v-if="!is_verification_success &&  $store.state.verification.couponInfo.couponType != 5">
          <qr :text="'xcq_' + $store.state.verification.couponId || ''" @downloadImg="downloadImg" name="二维码"></qr>
        </div>
        <!-- <div class="div_sty" v-else>
         暂时无法核销
        </div> -->
        <!-- 核销成功后的文字提示 -->
        <div class="div2" v-if="is_verification_success">
          <img style="width:3rem" src="~/static/coupon/validate_success.png" />
          <p>优惠券核销成功</p>
          <div style=" margin: 2rem auto ">
            <p>
             {{($store.state.verification.couponInfo.couponTemplateInfo.couponType==1||$store.state.verification.couponInfo.couponTemplateInfo.couponType==4) ? `${$store.state.verification.couponInfo.couponTemplateInfo.couponAmt}元优惠券`:$store.state.verification.couponInfo.couponTemplateInfo.couponType==2?  `${$store.state.verification.couponInfo.couponTemplateInfo.couponAmt}%优惠券`:''}}
            </p>
            <p style="font-size:0.3rem">
              {{
                $store.state.verification.couponInfo.couponIssueInfo
                  .couponThresholdAmt === 0
                  ? "无门槛"
                  : "满" +
                    $store.state.verification.couponInfo.couponIssueInfo
                      .couponThresholdAmt +
                    "元可用"
              }}
            </p>
            <p v-if="writeOffTime" style="font-size:0.3rem">
              核销时间：
              {{ writeOffTime }}
            </p>
          </div>
          <van-button
            type="primary"
            size="normal"
            style="width:100%;height:1rem"
            @click="goback"
            >返回</van-button
          >
        </div>
        <!-- 底部文字 -->
        <div
          class="div3"
          style="text-align:center"
          v-if="!is_verification_success"
        >
          <h1>
            {{($store.state.verification.couponInfo.couponTemplateInfo.couponType==1||$store.state.verification.couponInfo.couponTemplateInfo.couponType==4) ? `${$store.state.verification.couponInfo.couponTemplateInfo.couponAmt}元优惠券`:$store.state.verification.couponInfo.couponTemplateInfo.couponType==2?  `${$store.state.verification.couponInfo.couponTemplateInfo.couponAmt}%优惠券`:''}}
          </h1>
          <span>
            {{
              $store.state.verification.couponInfo.couponIssueInfo
                .couponThresholdAmt === 0
                ? "无门槛"
                : "满" +
                  $store.state.verification.couponInfo.couponIssueInfo
                    .couponThresholdAmt +
                  "元可用"
            }}
          </span>
          <div class="text">
            <p>
              油品：
              <b>{{ $store.state.verification.couponInfo.oils }}</b>
            </p>
            <p>
              适用：
              <b>
                {{
                  $store.state.verification.couponInfo.couponTemplateInfo
                    .couponType == 3
                    ? $store.state.verification.couponInfo.verStaNames
                    : $store.state.verification.couponInfo.couponStaNames
                }}
              </b>
            </p>
            <p>
              截止：
              <b>
                {{ $store.state.verification.couponInfo.couponEffectiveTime }}
              </b>
            </p>
            <p>
              来源：
              <b>
                {{
                  $store.state.verification.couponInfo.couponIssueInfo.issueName
                }}
              </b>
            </p>

            <!--
            此优惠券可用于：{{
              $store.state.verification.verificationName || "本油企适用"
            }} -->
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div>更多活动，请关注我们的公众号</div>
      <div>上海深斯能源科技有限公司提供技术支持</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { mapGetters } from "vuex";
import Qr from "@/components/QrCode";
import { Icon, Button } from "vant";

Vue.use(Icon);
Vue.use(Button);
export default {
  head() {
    return {
      title: "我的优惠券"
    };
  },
  data() {
    return {
      is_verification_success: false,
      timer: null,
      verification_success_info: {}
    };
  },
  components: {
    Qr: Qr
  },
  computed: {
    ...mapGetters({
      userInfo: "authen/userInfo"
    })
  },
  created() {
    console.log(this.$store.state.verification, "4444");
    if (!this.$store.state.verification.couponInfo.couponNo) {
      alert("此页面不直接开放");
      this.$router.replace({
        path: "/" + this.enterpriseId + "/coupon/"
      });
    }
    return;
  },
  watch: {
    // 监控是否成功核销
    is_verification_success: {
      handler(status) {
        const couponNo = this.$store.state.verification.couponInfo.couponNo;
        clearInterval(this.timer);
        if (!status && !this.timer) {
          // 显示核销码， 轮询核销状态
          this.timer = setInterval(() => {
            console.log("进行核销中.....");
            this.$axios
              .$get("/getIfCancelCouponSuccess", {
                params: {
                  couponNo: couponNo
                }
              })
              .then(res => {
                if (res.data.couponIsUsed === "1") {
                  console.log("核销成功");
                  this.is_verification_success = true;
                  this.verification_success_info = res.data;
                  this.writeOffTime = res.data.writeOffTime;
                  clearInterval(this.timer);
                }
              })
              .catch(err => {
                clearInterval(this.timer);
                alert(err.message);
              });
          }, 3000);
        }
      },
      immediate: true
    }
  },
  methods: {
    downloadImg() {
      console.log("~~~~");
    },
    goback() {
      this.$router.replace(`/${this.enterpriseId}/coupon`);
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>

<style lang="scss" scoped>
.coupon_verification {
  width: 80vw;
  min-height: 100vh;
  margin: auto;
  background: #ffffff;
  padding: 0 0.3rem 0 0.3rem;
  box-sizing: border-box;

  > .top {
    width: 6.9rem;
    height: 1rem;

    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 7.5rem;
      height: 1rem;
      padding: 0 0.3rem 0 0.3rem;
      box-sizing: border-box;
      background: #ffffff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      span {
        height: 0.45rem;
        font-size: 0.32rem;
        font-weight: 400;
        color: #aaaaaa;
        line-height: 0.45rem;
        letter-spacing: 0.01rem;
      }
      span.selected {
        color: #111111;
      }
    }
  }
  > .center {
    .qr {
      margin-top: 4vh;
      img {
        max-width: 100%;
      }
      .text {
        text-align: justify;
        margin-top: 1rem;
      }

      .div1 {
        img {
          box-shadow: 0px 1px 4px 0px #ddd;
        }
      }
      .div2 {
        text-align: center;
        i {
          font-size: 2rem;
          color: green;
        }
        p {
          font-size: 0.5rem;
        }
      }
    }
  }
  > .bottom {
    margin-top: 0.8rem;
    margin-bottom: 0.3rem;
    text-align: center;
    font-size: 0.22rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.25);
    line-height: 0.32rem;
    letter-spacing: 1px;
  }
}
.div_sty {
 height: 3rem;
 line-height: 3rem;
 text-align: center;
 font-size: 0.4rem;
}
</style>
